<template>
	<mu-container class="container-wrapper">
		<div :style="immerStyle"></div>
		<mu-appbar id='bar' color="teal">
			<mu-button icon slot="left" @click="openSearch()">
				<mu-icon value="search"></mu-icon>
			</mu-button>
			已回收
			<mu-button icon slot="right">
				<mu-icon value="fullscreen"></mu-icon>
			</mu-button>
			<mu-button icon slot="right" @click="refresh()">
				<mu-icon value="refresh"></mu-icon>
			</mu-button>
		</mu-appbar>
		<mu-tabs id='tabs' :value.sync="active1" inverse color="secondary" text-color="rgba(0, 0, 0, .54)" center>
			<mu-tab>已回收</mu-tab>
			<mu-tab>已入库</mu-tab>
			<mu-tab>被取消</mu-tab>
		</mu-tabs>
		<div style="overflow: auto;height: 100%;padding-bottom: 150px;">
			<div ref="container1" class="loadmore-content" v-if="active1 === 0">
				<mu-load-more @refresh="refresh1" :refreshing="refreshing1" :loading="loading1" @load="load1">
					<mu-list>
						<template v-for="i1 in num1">
							<mu-list-item :ripple="true" @click="openList()" button>
								<mu-paper>
									<mu-button small flat :disabled="true">
										<mu-icon left value="dashboard"></mu-icon>
										案件号：92500032008333786092344
									</mu-button>
									<div class="tb_line"></div>
								</mu-paper>
								<mu-list-item-action>
									<img src="../../assets/img/1.jpg">
								</mu-list-item-action>
								<mu-list-item-content>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">厂牌车型：雪佛兰SGM7189ATA轿车1</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">回收公司 ：合肥红月汽车服务有限责任公司</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87);font-weight: 600;">车牌号：&nbsp;&nbsp;皖AK5K10</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">创建时间 ：2018-7-20 14:16:46</span>
									</mu-list-item-sub-title>
								</mu-list-item-content>
							</mu-list-item>
						</template>
					</mu-list>
				</mu-load-more>
			</div>
			<div ref="container2" class="loadmore-content" v-if="active1 === 1">
				<mu-load-more @refresh="refresh2" :refreshing="refreshing2" :loading="loading2" @load="load2">
					<mu-list>
						<template v-for="i2 in num2">
							<mu-list-item :ripple="true" @click="openList()" button>
								<mu-paper>
									<mu-button small flat :disabled="true">
										<mu-icon left value="dashboard"></mu-icon>
										案件号：92500032008333786092344
									</mu-button>
									<div class="tb_line"></div>
								</mu-paper>
								<mu-list-item-action>
									<img src="../../assets/img/1.jpg">
								</mu-list-item-action>
								<mu-list-item-content>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">厂牌车型：雪佛兰SGM7189ATA轿车2</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">回收公司 ：合肥红月汽车服务有限责任公司</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87);font-weight: 600;">车牌号：&nbsp;&nbsp;皖AK5K10</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">创建时间 ：2018-7-20 14:16:46</span>
									</mu-list-item-sub-title>
								</mu-list-item-content>
							</mu-list-item>
						</template>
					</mu-list>
				</mu-load-more>
			</div>
			<div ref="container3" class="loadmore-content" v-if="active1 === 2">
				<mu-load-more @refresh="refresh3" :refreshing="refreshing3" :loading="loading3" @load="load3">
					<mu-list>
						<template v-for="i3 in num3">
							<mu-list-item :ripple="true" @click="openList()" button>
								<mu-paper>
									<mu-button small flat :disabled="true">
										<mu-icon left value="dashboard"></mu-icon>
										案件号：92500032008333786092344
									</mu-button>
									<div class="tb_line"></div>
								</mu-paper>
								<mu-list-item-action>
									<img src="../../assets/img/1.jpg">
								</mu-list-item-action>
								<mu-list-item-content>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">厂牌车型：雪佛兰SGM7189ATA轿车3</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">回收公司 ：合肥红月汽车服务有限责任公司</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87);font-weight: 600;">车牌号：&nbsp;&nbsp;皖AK5K10</span>
									</mu-list-item-sub-title>
									<mu-list-item-sub-title>
										<span style="color: rgba(0, 0, 0, .87)">创建时间 ：2018-7-20 14:16:46</span>
									</mu-list-item-sub-title>
								</mu-list-item-content>
							</mu-list-item>
						</template>
					</mu-list>
				</mu-load-more>
			</div>
		</div>
	</mu-container>
</template>

<script>
	import Vue from "vue";
	import '../../utils/common';
	import { immersed } from "@/utils/immersed.js";
	import { openWebview, openWebviewFast } from "@/utils/webview";
	import { request } from "@/utils/request";
	import MuseUI from 'muse-ui';
	import 'muse-ui/dist/muse-ui.css';
	import '@/assets/muse/MaterialIcons-Regular.css';

	Vue.use(MuseUI);

	export default {
		data() {
			return {
				num1: 10,
				num2: 10,
				num3: 10,
				refreshing1: false,
				loading1: false,
				refreshing2: false,
				loading2: false,
				refreshing3: false,
				loading3: false,
				immerStyle: {
					width: '100%',
					height: window.immersed + 'px',
					backgroundColor: 'rgb(0, 150, 136)'
				},
				active1: 0
			}
		},
		methods: {
			refresh() {
				if(this.active1 === 0) {
					this.refresh1();
				} else if(this.active1 === 1) {
					this.refresh2();
				} else if(this.active1 === 2) {
					this.refresh3();
				}
			},
			refresh1() {
				this.refreshing1 = true;
				this.$refs.container1.scrollTop = 0;
				setTimeout(() => {
					this.refreshing1 = false;
					this.num1 = 10;
				}, 2000)
			},
			refresh2() {
				this.refreshing2 = true;
				this.$refs.container2.scrollTop = 0;
				setTimeout(() => {
					this.refreshing2 = false;
					this.num2 = 10;
				}, 2000)
			},
			refresh3() {
				this.refreshing3 = true;
				this.$refs.container3.scrollTop = 0;
				setTimeout(() => {
					this.refreshing3 = false;
					this.num3 = 10;
				}, 2000)
			},
			load1() {
				this.loading1 = true;
				setTimeout(() => {
					this.loading1 = false;
					this.num1 += 10;
				}, 2000)
			},
			load2() {
				this.loading2 = true;
				setTimeout(() => {
					this.loading2 = false;
					this.num2 += 10;
				}, 2000)
			},
			load3() {
				this.loading3 = true;
				setTimeout(() => {
					this.loading3 = false;
					this.num3 += 10;
				}, 2000)
			},
			openSearch() {
				// 重写了标题样式
				openWebview({
					url: "./search.index.html",
					id: "search.index"
				}, {
					titleNView: {
						backgroundColor: '#009688', // 导航栏背景色
						titleText: "案件查找", // 导航栏标题
						titleColor: "#fff", // 文字颜色
						// type: "transparent", // 透明渐变样式
						autoBackButton: true, // 自动绘制返回箭头
						splitLine: {
							// 底部分割线
							color: "#cccccc"
						}
					},
					bounce: 'vertical'
				}, {
					type: 'task'
				});

			},
			openList() {
				openWebviewFast(
					"./index.list.html",
					"index.list",
					"待回收"
				);

			}
		}
	};
</script>

<style lang="less">
	.container-wrapper {
		padding: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #F1F1F1;
		.mu-appbar {
			width: 100%;
			height: 52px;
			z-index: 100;
			position: relative;
		}
		.mu-tabs-center {
			z-index: 99;
		}
	}
	
	.loadmore-content {
		-webkit-overflow-scrolling: touch;
		background-color: #F1F1F1;
		padding: 0px 5px;
		.mu-item {
			height: 180px;
			margin-bottom: 10px;
			background-color: #fff;
			padding: 0 5px;
			padding-top: 40px;
			.mu-paper {
				position: absolute;
				left: 0;
				top: 0px;
				font-weight: bold;
				background-color: rgba(0, 0, 0, 0);
				width: 100%;
				text-indent: 2px;
				.mu-flat-button.mu-button-small {
					color: #333;
					font-size: 14px;
					height: 28px;
					margin: 8px 0 4px;
					.mu-icon-left {
						margin-top: -2px;
					}
				}
				.tb_line {
					border: none;
					border-bottom: 1px solid #e1e3e5;
					height: 1px;
					transform: scaleY(0.5);
					transform-origin: 0 0;
					-webkit-transform: scaleY(0.5);
					-webkit-transform-origin: 0 0;
				}
			}
			.mu-item-action {
				width: 40%;
				overflow: hidden;
				max-height: 116px;
				img {
					width: 100%;
					border-radius: 1px;
				}
			}
			.mu-item-content {
				margin-left: 8px;
				position: relative;
				.mu-item-sub-title {
					font-size: 12px;
					line-height: 25px;
				}
			}
		}
	}
</style>